<template>
	<z-paging ref="paging" @query="queryList" :refresherEnabled="true" :loadingMoreEnabled="false"
		:auto="false" :hideEmptyView="true">
		<view slot="top">
			
		</view>
		<view class="header">
			<view class="u-p-l-60 u-p-r-60 u-flex">
				<view @click="handleEditAvatar">
					<u-avatar :src="headerUrl" size="64"></u-avatar>
				</view>
				<view class="u-m-l-30">
					<template v-if="isLogin">
						<view class="u-flex" @click="handleEditUserInfo">
							<text class="u-font-36 text-bold u-m-r-10">{{nickName}}</text>
							<u-icon name="edit-pen-fill" size="24"></u-icon>
						</view>
						<view class="u-m-t-10">
							<text>{{loginAccount}}</text>
						</view>
					</template>
					<template v-else>
						<view @click="handleNav('login')">
							<text class="u-font-40 text-bold">点击登录</text>
						</view>
					</template>
					
				</view>
			</view>
			
			<view class="u-p-l-60 u-p-r-60 u-m-t-30 u-flex text-white">
				<view class="u-flex-1 text-center" @click="handleNav('point')">
					<u-count-to :duration="countDuration" :startVal="0" :endVal="pointBalance" color="#FFFFFF" fontSize="26" bold decimals="0" separator=","></u-count-to>
					<view class="text-white">积分</view>
				</view>
				<view class="u-flex-1 text-center">
					<u-count-to :duration="countDuration" :startVal="0" :endVal="cashBalance" color="#FFFFFF" fontSize="26" bold></u-count-to>
					<view class="text-white">成长币</view>
				</view>
				<view class="u-flex-1 text-center" @click="handleNav('coupon')">
					<u-count-to :duration="countDuration" :startVal="0" :endVal="availableCouponCount" color="#FFFFFF" fontSize="26" bold></u-count-to>
					<view class="text-white">优惠券</view>
				</view>
			</view>
			
			<view class="u-m-t-30 u-p-l-30 u-p-r-30 u-font-24">
				<view class="bg-black u-p-l-50 u-p-t-20 u-p-r-50 u-p-b-20 u-flex" style="border-radius: 30rpx 30rpx 0rpx 0rpx">
					<view class="u-flex-1">
						<text>注册会员即享积分好礼</text>
					</view>
					<view class="u-flex-1 u-flex u-flex-end" @click="handleNav('login')" v-if="!isLogin">
						<text>立即注册</text>
					</view>
				</view>
			</view>
		</view>
		
		
		<view class="u-m-30 bg-white">
			<u-swiper :list="bannerList" @click="handleNavBanner" :current="current" circular></u-swiper>
		</view>
		
		<view class="u-m-30 bg-white b-r-30 u-p-b-30">
			<view class="u-flex u-p-t-50 u-p-l-50 u-p-r-50 u-p-b-20">
				<view class="u-flex-1">
					<text class="text-bold u-font-32">我的订单</text>
				</view>
				<view class="u-flex-1 u-flex u-flex-end" @click="handleNav('order', 0)">
					<text class="u-m-r-10">查看全部订单</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			
			<view class="u-m-t-20">
				<u-grid col="4" :border="false">
					<u-grid-item :index="1" @click="handleNav('order', 1)">
						<image src="~@/static/images/my/dfh.svg" class="icon-size"></image>
						<view class="u-p-t-10 u-font-24">待支付</view>
					</u-grid-item>
					<u-grid-item :index="2" @click="handleNav('order', 2)">
						<image src="~@/static/images/my/dsh.svg" class="icon-size"></image>
						<view class="u-p-t-10 u-font-24">待发货</view>
					</u-grid-item>
					
					<u-grid-item :index="3" @click="handleNav('order', 3)">
						<image src="~@/static/images/my/dd.svg" class="icon-size"></image>
						<view class="u-p-t-10 u-font-24">待收货</view>
					</u-grid-item>
					<u-grid-item :index="4" @click="handleNav('order', 4)">
						<image src="~@/static/images/my/dpj.svg" class="icon-size"></image>
						<view class="u-p-t-10 u-font-24">待评价</view>
					</u-grid-item>					
				</u-grid>
			</view>
		</view>
		
		
		<view class="u-m-30 bg-white b-r-30 u-p-b-50 u-p-t-50">
			<view>
				<u-grid col="4" :border="false">
					<u-grid-item :index="1" @click="handleNav('pointsMall')">
						<image src="~@/static/images/my/pointShop.svg" class="icon-size"></image>
						<view class="u-p-t-10 u-font-24">积分商城</view>
					</u-grid-item>
					
					<u-grid-item :index="2" @click="handleNav('address')">
						<image src="~@/static/images/my/address.svg" class="icon-size"></image>
						<view class="u-p-t-10 u-font-24">收货地址</view>
					</u-grid-item>
					
					
					<u-grid-item :index="3" @click="handleNav('money')">
						<image src="~@/static/images/my/money.svg" class="icon-size"></image>
						<view class="u-p-t-10 u-font-24">成长币</view>
					</u-grid-item>
					
					<u-grid-item :index="4" @click="handleNav('coupon')">
						<image src="~@/static/images/my/coupon.svg" class="icon-size"></image>
						<view class="u-p-t-10 u-font-24">优惠券</view>
					</u-grid-item>
				</u-grid>
			</view>
			
			<view class="u-m-t-40">
				<u-grid col="4" :border="false">
					<u-grid-item :index="1" @click="handleNav('article')">
						<image src="~@/static/images/my/yuer.svg" class="icon-size"></image>
						<view class="u-p-t-10 u-font-24">育儿知识</view>
					</u-grid-item>
					
					<u-grid-item :index="2" @click="handleNav('userInner')">
						<image src="~@/static/images/my/inner.svg" class="icon-size"></image>
						<view class="u-p-t-10 u-font-24">专属福利购</view>
					</u-grid-item>
					
				</u-grid>
			</view>
		</view>
		<!-- <view>
			<button @click="handleSendMq">mq测试</button>
		</view> -->
		<u-modal title="修改昵称" :show="showEditNickName" 
						 show-cancel-button 
						 cancel-text="我再想想" 
						 confirm-text="提交"
						 confirm-color="#FFB143"
						 @cancel="showEditNickName = false" @confirm="handleSubmitEditNickName">
			<view class="slot-content">
				<u-form labelPosition="left" :model="model" :rules="rules" ref="uForm" :errorType="errorType">
					<u-form-item label="昵称：" label-width="50" prop="nickName" >
						<u-input placeholder="请输入昵称" border="none" v-model="model.nickName" type="text" maxlength="10"></u-input>
					</u-form-item>
				</u-form>
			</view>
		</u-modal>
		
	</z-paging>
</template>

<script>
	import {jumpTypeEnum, couponCurrentStatusEnum, imageBaseUrl} from '@/common/const.js'
	import {mapGetters} from 'vuex'
	import {getUserInfo} from '@/api/login.js'
	import {maskPhoneNumber} from '@/common/util.js'
	import {getBanner} from '@/api/home.js'
	import {getAvailableCoupon} from '@/api/coupon.js'
	import {sendMq, updateUserNickName, updateUserAvatar} from '@/api/user.js'
	import {uploadImage} from '@/api/upload.js'
	import {userInnerLogin} from '@/api/user.js'
	
	export default{
		data(){
			return{
				countDuration:200,
				
				activityList:[],
				bannerList: [],
				current:0,
				
				// 可用优惠券个数
				availableCouponCount:0,
				showEditNickName:false,
				
				model:{
					nickName:''
				},
				rules:{
					nickName: [
						{
							required: true,
							message: '请输入昵称',
							trigger: 'blur' ,
						},
					],
				},
				errorType: 'toast',
			}
		},
		computed:{
			...mapGetters(['isLogin', 'userInfo', 'userInnerIsLogin', 'userInnerInfo']),
			
			headerUrl(){
				if(this.userInfo){
					return this.userInfo.headerUrl ? this.userInfo.headerUrl : ''
				}
				return ''
			},
			
			/**
			 * 昵称
			 */
			nickName(){
				if(this.userInfo){
					return this.userInfo.nickName ? this.userInfo.nickName : '微信授权获取昵称'
				}
				return ''
			},
			
			/**
			 * 获取手机号
			 */
			loginAccount(){
				if(this.userInfo){
					return maskPhoneNumber(this.userInfo.loginAccount) 
				}
				return ''
			},
			
			/**
			 * 积分余额
			 */
			pointBalance(){
				if(this.userInfo && this.userInfo.shopUserInfo){
					return this.userInfo.shopUserInfo.pointBalance
				}
				return 0
			},
			
			/**
			 * 提现余额
			 */
			cashBalance(){
				if(this.userInfo && this.userInfo.shopUserInfo){
					return this.userInfo.shopUserInfo.cashBalance
				}
				return 0
			}
		},
		onLoad() {
			this.init()
		},
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			
		},
		components:{
		},
		methods:{
			
			/**
			 * 初始化
			 */
			init(){
				this.reload()
			},
			
			/**
			 * 重新加载
			 */
			reload(){
				setTimeout(()=>{
					// 重新加载
					this.$refs.paging.reload()
				},100)
			},
			
			/**
			 * 查询数据
			 */
			queryList(){
				this.bannerList = []
				
				// 获取轮播图
				getBanner().then(res=>{
					this.activityList = res.data
					this.activityList.forEach(item=>{
						item.bannerImage = JSON.parse(item.bannerImage)
						if(item.bannerImage.length > 0){
							this.bannerList.push(item.bannerImage[0].materialUrl)
						}
					})
				})
				
				if(this.isLogin){
					// 登录的场合，重新获取用户信息
					this.$store.dispatch("updateUserInfo")
					
					// 获取优惠券个数
					getAvailableCoupon().then(res=>{
						let data = res.data
						let count = data.filter(p=>p.couponCurrentStatus == couponCurrentStatusEnum.inProgress || p.couponCurrentStatus == couponCurrentStatusEnum.notStarted).length
						this.availableCouponCount = count
					})
				}
				
				this.$refs.paging.complete([]);
			},
			
			/**
			 * 界面跳转
			 */
			handleNav(type, params){
				switch(type){
					case 'pointsMall':
						// 积分商城
						this.jumpUtil.jumpTo(jumpTypeEnum.navigate, '/pages_one/points_mall/index', false)
						break;
					case 'coupon':
						// 优惠券
						this.jumpUtil.jumpTo(jumpTypeEnum.navigate, '/pages_one/coupon/index', true)
						break;
					case 'article':
						// 育儿知识
						this.jumpUtil.jumpTo(jumpTypeEnum.switchTab, '/pages/article/index', false)
						break;
					case 'point':
						// 个人积分
						this.jumpUtil.jumpTo(jumpTypeEnum.navigate, '/pages_one/points/record', true)
						break;
					case 'order':
						// 订单列表
						this.jumpUtil.jumpTo(jumpTypeEnum.navigate, `/pages_one/order/list?index=${params}`, true)
						break;
					case 'address':
						// 收货地址
						this.jumpUtil.jumpTo(jumpTypeEnum.navigate, '/pages_one/address/index', true)
						break;
					case 'login':
						// 登录
						this.jumpUtil.jumpTo(jumpTypeEnum.navigate, `/pages_one/login/index`, false)
						break;
					case 'money':
						this.$u.toast('正在建设中...')
						break;
					case 'userInner':
						// 员工天地
						this.userInner()
						
						break;
				}
			},
			
			userInner(){
				if(this.userInnerIsLogin && this.userInnerInfo){
					debugger
					const userNo = this.userInnerInfo.userNo
					const phone = this.userInnerInfo.phone
					// 不存在的场合，默认用户名手机号登录，兼容原来
					const type = this.userInnerInfo.type ? this.userInnerInfo.type : '1'
					const couponCode = this.userInnerInfo.couponCode
					
					// 登录
					userInnerLogin({userNo:userNo, phone:phone, type:type, couponCode:couponCode}).then(res=>{
						this.jumpUtil.jumpTo(jumpTypeEnum.navigate, `/pages_one/user_inner/goods/index`, false)
					}).catch(e=>{
						// 信息错误，退出自动登录
						this.$store.dispatch("userInnerLogOut").then(res=>{
							this.jumpUtil.jumpTo(jumpTypeEnum.navigate, `/pages_one/user_inner/login/index`, false)
						})
					})
				} else {
					this.jumpUtil.jumpTo(jumpTypeEnum.navigate, `/pages_one/user_inner/login/index`, false)
				}
			},
			
			/**
			 * 点击活动跳转
			 */
			handleNavBanner(index){
				const item = this.activityList[index]
				if(item.navType == '1'){
					this.jumpUtil.jumpTo(jumpTypeEnum.navigate, `/pages_one/goods/detail?spuId=${item.spuId}&skuId=${item.skuId}`, false)
				} else if(item.navType == '2'){
					this.jumpUtil.jumpTo(jumpTypeEnum.navigate, `/pages_one/equity/detail?id=${item.spuId}`, false)
				}
			},
			
			/**
			 * 修改用户昵称
			 */
			handleEditUserInfo(){
				this.model.nickName = this.userInfo.nickName
				this.showEditNickName = true
				this.$nextTick(()=>{
					this.$refs.uForm.setRules(this.rules)
				})
			},
			
			/**
			 * 提交用户昵称信息
			 */
			handleSubmitEditNickName(){
				let that = this
				this.$refs.uForm.validate().then(res => {
					updateUserNickName({
						nickName: this.model.nickName
					}).then(res=>{
						that.showEditNickName = false
						// 重新加载用户信息
						that.reload()
						uni.showModal({
							title: '提示',
							content: '昵称修改成功',
							showCancel:false,
							confirmColor: '#FFB143',
							success: function (res) {
							}
						});
					})
				})
			},
			
			/**
			 * 修改用户头像
			 */
			handleEditAvatar(){
				if(this.isLogin){
					this.chooseImage().then(res=>{
						console.log(res)
						// 上传成功后修改用户头像
						updateUserAvatar({
							headerUrl: res.remotePath
						}).then(res=>{
							uni.hideLoading()
							// 更新本地用户信息
							this.reload()
						})
					})
				}
			},
			
			/**
			 * 选择图片并上传
			 */
			chooseImage(){
				return new Promise((resolve, reject)=>{
					let that = this
					uni.chooseImage({
						sizeType: ['compressed'],
						sourceType: ['album', 'camera'],
						success: res => {
							uni.showLoading();
							let path = res.tempFilePaths[0]
							uploadImage(path).then(res => {
								resolve({
									localPath: path,
									remotePath: imageBaseUrl + res.url
								})
							})
						}
					})
				})
			},
			
			handleSendMq(){
				sendMq().then(res=>{})
			}
			
		}
	}
</script>

<!-- <style>
	page{
		background-color: #FFFFFF;
	}
</style> -->

<style scoped>
	.header{
		background-color: #FFB143;
		padding-top: 180rpx;
	}
	
	.icon-size{
		width: 60rpx;
		height: 60rpx;
	}
	
	.icon-size-small{
		width: 50rpx;
		height: 50rpx;
	}
</style>